<template>
  <div>
    <div class="banner">
      <swiper :options="{loop:true, autoplay:true, speed: 1000}">
        <swiper-slide>
          <div style="height: 107px;"><img src="../../../static/images/bannerA-1.png"/></div>
        </swiper-slide>
        <swiper-slide>
          <div style="height: 107px;"><img src="../../../static/images/bannerA-2.png"/></div>
        </swiper-slide>
        <swiper-slide>
          <div style="height: 107px;"><img src="../../../static/images/bannerA-3.png"/></div>
        </swiper-slide>
      </swiper>
    </div>
    <div class="main-box">
      <div class="education">
        <div class="grid-x">
          <div class="column small-3">
            <a href="#">
              <img src="../../../static/images/icon-zs-1.png"/>
              <p>开放教育</p>
            </a>
          </div>
          <div class="column small-3">
            <a href="#">
              <img src="../../../static/images/icon-zs-2.png"/>
              <p>奥鹏教育</p>
            </a>
          </div>
          <div class="column small-3">
            <a href="#">
              <img src="../../../static/images/icon-zs-3.png"/>
              <p>公用教育</p>
            </a>
          </div>
          <div class="column small-3">
            <a href="#">
              <img src="../../../static/images/icon-zs-4.png"/>
              <p>中职教育</p>
            </a>
          </div>
        </div>
      </div>
      <Item v-for="(recruit, index) in recruitList" :key="index" :item="recruit"></Item>
      <div class="title">
        <h3>联系方式</h3>
      </div>
      <div class="link_way">
        <div class="grid-x bor-b">
          <div class="column small-4">
            <p class="p_img"><img src="../../../static/images/icon-zs-phone.png"/> 联系方式:</p>
          </div>
          <div class="column small-8">
            <p class="p_text">0760-88301234</p>
            <p class="p_text">0760-88878248</p>
            <p class="p_text">0760-88878276</p>
          </div>
        </div>
        <div class="grid-x bor-b">
          <div class="column small-3">
            <p class="p_img"><img src="../../../static/images/icon-zs-address.png"/> 地址:</p>
          </div>
          <div class="column small-9">
            <p class="p_text">中山市孙文中路134号</p>
          </div>
        </div>
        <div class="grid-x bor-b">
          <div class="column small-3">
            <p class="p_img"><span></span> 编码:</p>
          </div>
          <div class="column small-9">
            <p class="p_text">528400 </p>
          </div>
        </div>
      </div>
      <div class="title tit-bor">
        <h3>热门专业</h3>
      </div>
      <div class="swiper-container slider autoplay Pro_box">
        <swiper :options="{loop:true, autoplay:true, speed: 1000, slidesPerView: 3}">
          <swiper-slide>
            <div>
              <div class="Pro_item">
                <h3>会计</h3>
                <p class="p_b">专科</p>
                <P class="p_daihao">专业代号</P>
                <p class="p_number">630320</p>
                <a href="#">了解详情</a>
              </div>
            </div>
          </swiper-slide>
          <swiper-slide>
            <div>
              <div class="Pro_item">
                <h3>市场营销</h3>
                <p class="p_b">专科</p>
                <P class="p_daihao">专业代号</P>
                <p class="p_number">630320</p>
                <a href="#">了解详情</a>
              </div>
            </div>
          </swiper-slide>
          <swiper-slide>
            <div>
              <div class="Pro_item">
                <h3>公共事业管理</h3>
                <p class="p_b">专科</p>
                <P class="p_daihao">专业代号</P>
                <p class="p_number">630320</p>
                <a href="#">了解详情</a>
              </div>
            </div>
          </swiper-slide>
          <swiper-slide>
            <div>
              <div class="Pro_item">
                <h3>会计</h3>
                <p class="p_b">专科</p>
                <P class="p_daihao">专业代号</P>
                <p class="p_number">630320</p>
                <a href="#">了解详情</a>
              </div>
            </div>
          </swiper-slide>
        </swiper>
      </div>
    </div>
  </div>
</template>

<script>
  import 'swiper/dist/css/swiper.css'
  import {swiper, swiperSlide} from 'vue-awesome-swiper'
  import Item from '../../components/Item/Item'
  import {reqRecruit} from '../../api/index'
  import commonJs from '../../assets/js/commonJs'

  export default {
    name: "Recruit",
    components: {
      Item, swiper, swiperSlide
    },
    data() {
      return {
        recruitList: []
      }
    },
    async mounted() {
      let result = await commonJs.openAjax(reqRecruit(), true, true);
      if (result.code == 0) {
        this.recruitList = result.data;
      }
    }
  }
</script>

<style scoped>
  .slider {
    margin-bottom: 1rem;
  }

  .Pro_box .swiper-slide {
    margin-top: 5px;
  }
</style>
